<template>
  <!-- 网站管理 -->
  <div>
    <el-tag effect="dark" class="my-tag">
      <svg
        viewBox="0 0 1024 1024"
        width="20"
        height="20"
        style="vertical-align: -4px"
      >
        <path
          d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
          fill="#8C7BFD"
        ></path>
        <path
          d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
          fill="#FFE37B"
        ></path>
      </svg>
      网站信息
    </el-tag>
    <el-form ref="webInfo" :model="webInfo" label-width="100px">
      <el-form-item label="网站名字">
        <el-input
          v-model="webInfo.webName"
          placeholder="请输入网站名字..."
        ></el-input>
      </el-form-item>
      <el-form-item label="作者名字">
        <el-input
          v-model="webInfo.authorName"
          placeholder="请输入作者名字..."
        ></el-input>
      </el-form-item>
      <el-form-item
        v-for="(motto, index) in mottoList"
        :key="motto.key"
        :label="'座右铭/格言' + index"
      >
        <el-row>
          <el-col :span="23">
            <el-input
              v-model="motto.value"
              placeholder="请输入座右铭/格言..."
            ></el-input>
          </el-col>
          <el-col :span="1">
            <el-button
              type="primary"
              icon="el-icon-plus"
              style="margin-left: 3px"
              @click="addMottoInput"
              v-if="index === 0"
              >新增</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-minus"
              style="margin-left: 3px"
              @click.prevent="deleteMottoInput(motto)"
              v-else
              >删除</el-button
            >
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item
        v-for="(notice, index) in noticeList"
        :key="notice.key"
        :label="'网站公告' + index"
      >
        <el-row>
          <el-col :span="23">
            <el-input
              v-model="notice.value"
              placeholder="请输入网站公告..."
            ></el-input>
          </el-col>
          <el-col :span="1">
            <el-button
              type="primary"
              icon="el-icon-plus"
              style="margin-left: 3px"
              @click="addNoticeInput"
              v-if="index === 0"
              >新增</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-minus"
              style="margin-left: 3px"
              @click.prevent="deleteNoticeInput(notice)"
              v-else
              >删除</el-button
            >
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item
        v-for="(footer, index) in footerList"
        :key="footer.key"
        :label="'页脚' + index"
      >
        <el-row>
          <el-col :span="23">
            <el-input
              v-model="footer.value"
              placeholder="请输入页脚..."
            ></el-input>
          </el-col>
          <el-col :span="1">
            <el-button
              type="primary"
              icon="el-icon-plus"
              style="margin-left: 3px"
              @click="addFooterInput"
              v-if="index === 0"
              >新增</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-minus"
              style="margin-left: 3px"
              @click.prevent="deleteFooterInput(footer)"
              v-else
              >删除</el-button
            >
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="头像">
        <el-tooltip effect="dark" content="点击上传头像" placement="right">
          <el-upload
            style="width: 150px"
            action=""
            :http-request="uploadAvatar"
            :show-file-list="false"
          >
            <el-avatar
              v-if="webInfo.avatar"
              :size="150"
              :src="webInfo.avatar"
              @error="true"
            >
              <img
                src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
              />
            </el-avatar>
            <el-button type="text" v-else>点击上传</el-button>
          </el-upload>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="背景图片">
        <el-tooltip effect="dark" content="点击上传背景图片" placement="right">
          <el-upload
            style="width: 300px"
            action=""
            :http-request="uploadBackgroundImg"
            :show-file-list="false"
          >
            <el-image
              v-if="webInfo.backgroundImage"
              :src="webInfo.backgroundImage"
            ></el-image>
            <el-button type="text" v-else>点击上传</el-button>
          </el-upload>
        </el-tooltip>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submit">提交信息</el-button>
  </div>
</template>

<script>
import { getWebInfo, update } from "@/api/webinfo";

export default {
  data() {
    return {
      webInfo: {
        // id
        id: undefined,
        // 网站名
        webName: "",
        // 作者名
        authorName: "",
        // 座右铭
        mottos: "",
        // 公告
        notices: "",
        // 头像
        avatar: "",
        // 背景图
        backgroundImage: "",
        // 页脚
        footers: "",
      },
      // 格言列表
      mottoList: [
        {
          value: "",
        },
      ],
      // 公告列表
      noticeList: [
        {
          value: "",
        },
      ],
      // 页脚列表
      footerList: [
        {
          value: "",
        },
      ],
    };
  },
  created() {
    this.getWebInfo();
  },
  methods: {
    // 获取webInfo
    getWebInfo() {
      getWebInfo()
        .then((res) => {
          if (!this.$common.isEmpty(res.data)) {
            this.webInfo = res.data;
            this.mottoList = res.data.mottoList;
            this.noticeList = res.data.noticeList;
            this.footerList = res.data.footerList;
          }
        })
        .catch((error) => {
          this.$message({
            type: "error",
            message: error.errMsg,
          });
        });
    },
    // 提交表单
    submit() {
      // 将格言列表、公告列表、页脚列表格式化
      this.formatInfo();
      update(this.webInfo)
        .then(() => {
          this.getWebInfo();
          this.$message({
            type: "success",
            message: "保存成功",
          });
        })
        .catch((error) => {
          this.$message({
            type: "error",
            message: error.errMsg,
          });
        });
    },
    // 格式化列表('|')
    formatInfo() {
      this.webInfo.mottos = this.$common.formatListToStr(this.mottoList, "|");
      this.webInfo.notices = this.$common.formatListToStr(this.noticeList, "|");
      this.webInfo.footers = this.$common.formatListToStr(this.footerList, "|");
    },
    // 上传头像
    async uploadAvatar(params) {
      this.webInfo.avatar = await this.$common.uploadFile(
        params.file,
        this.$constant.FILE_UPLOAD_SCENE_BLOG
      );
    },
    // 上传背景图片
    async uploadBackgroundImg(params) {
      this.webInfo.backgroundImage = await this.$common.uploadFile(
        params.file,
        this.$constant.FILE_UPLOAD_SCENE_BLOG
      );
    },
    // 添加座右铭输入框
    addMottoInput() {
      this.mottoList.push({
        value: "",
        key: Date.now(),
      });
    },
    // 删除座右铭输入框
    deleteMottoInput(item) {
      let index = this.mottoList.indexOf(item);
      if (index !== -1) {
        this.mottoList.splice(index, 1);
      }
    },
    // 添加公告输入框
    addNoticeInput() {
      this.noticeList.push({
        value: "",
        key: Date.now(),
      });
    },
    // 删除公告输入框
    deleteNoticeInput(item) {
      let index = this.noticeList.indexOf(item);
      if (index !== -1) {
        this.noticeList.splice(index, 1);
      }
    },
    // 添加页脚输入框
    addFooterInput() {
      this.footerList.push({
        value: "",
        key: Date.now(),
      });
    },
    // 删除页脚输入框
    deleteFooterInput(item) {
      let index = this.footerList.indexOf(item);
      if (index !== -1) {
        this.footerList.splice(index, 1);
      }
    },
  },
};
</script>

<style scoped>
.my-tag {
  margin-bottom: 20px !important;
  width: 100%;
  text-align: left;
  background: var(--lightYellow);
  border: none;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: var(--black);
}
</style>
